<template>
  <div class="theme-color" :style="{backgroundColor: color}" @click="toggle">
    <a-icon v-if="sChecked" type="check"></a-icon>
  </div>
</template>

<script lang="es6">
  const Group = {
    name: 'ColorCheckboxGroup',
    props: {
      defaultValues: {
        type: Array,
        required: false,
        default: () => []
      },
      multiple: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    data () {
      return {
        values: [],
        options: []
      }
    },
    computed: {
      colors () {
        let colors = [];
        this.options.forEach(item => {
          if (item.sChecked) {
            colors.push(item.color);
          }
        })
        return colors
      }
    },
    provide () {
      return {
        groupContext: this
      }
    },
    watch: {
      values: function (newVal, oldVal) {
        // 此条件是为解决单选时，触发两次chang事件问题
        if (!(newVal.length === 1 && oldVal.length === 1 && newVal[0] === oldVal[0]) || this.multiple) {
          this.$emit('change', this.values, this.colors);
        }
      }
    },
    methods: {
      handleChange (option) {
        if (!option.checked) {
          this.values = this.values.filter(item => item !== option.value);
        } else {
          if (!this.multiple) {
            this.values = [option.value];
            this.options.forEach(item => {
              if (item.value !== option.value) {
                item.sChecked = false;
              }
            })
          } else {
            this.values.push(option.value);
          }
        }
      }
    },
    render (h) {
      const clear = h('div', {attrs: {style: 'clear: both'}})
      return h(
        'div',
        {},
        [this.$slots.default, clear]
      )
    }
  };

  module.exports = {
    name: 'ColorCheckbox',
    Group: Group,
    props: {
      color: {
        type: String,
        required: true
      },
      value: {
        type: String,
        required: true
      },
      checked: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    data () {
      return {
        sChecked: this.checked
      }
    },
    inject: ['groupContext'],
    watch: {
      'sChecked': function (newVal, oldVal) {
        const value = {
          value: this.value,
          color: this.color,
          checked: this.sChecked
        }
        this.$emit('change', value);
        const groupContext = this.groupContext;
        if (groupContext) {
          groupContext.handleChange(value)
        }
      }
    },
    created () {
      const groupContext = this.groupContext;
      if (groupContext) {
        this.sChecked = groupContext.defaultValues.indexOf(this.value) >= 0
        groupContext.options.push(this);
      }
    },
    methods: {
      toggle () {
        this.sChecked = !this.sChecked
      }
    }
  };
</script>

<style scoped>
  .theme-color{
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    cursor: pointer;
    margin-right: 8px;
    text-align: center;
    color: #fff;
    font-weight: bold;
  }
</style>
